<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <h3>
        数据双向绑定如何实现
    </h3> -->

    <input id="ipt" type="text">
    <h3 id="h3"></h3>

    <script>
        let obj = {}
        Object.defineProperty(obj, "val", {
            // 设置值
            value: "val",
            // 是否可更改
            writable: true,
            // 是否可枚举
            enumerable: true,
            // get() {
            //     return "val2"
            // }
        })

        // obj.val = "val2"
        for (item in obj) {
            console.log(item)
        }
        

        // console.log(obj)



        // js简单实现数据双向绑定
        // let ipt = document.getElementById('ipt')
        // let h3 = document.getElementById('h3')

        // let obj = {}
        // let temp = ""
        // Object.defineProperty(obj, "val", {
        //     get() {
        //         return temp
        //     },
        //     set(value) {
        //         h3.innerHTML = value
        //         temp = value
        //     }
        // })

        // ipt.addEventListener('input', () => {
        //     obj.val = ipt.value
        // })

        
















        // 1. 数据属性

        // 2. 访问器属性
        // let obj = {}
        // let temp = "李四"
        // // Object.defineProperty(目标对象, key, 配置对象)
        // Object.defineProperty(obj, "name", {
        //     // value: "李四"
        //     // 得到属性的时候会执行
        //     get() {
        //         // console.log('get函数执行了~')
        //         return temp
        //     },
        //     // 对属性赋值的时候会执行
        //     set(value) {
        //         // value 读取的是等号后面的内容
        //         temp = value
        //     }
        // })

        // obj.name = "王五"

        // console.log(obj)
    </script>
</body>
</html>